<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/index.css">  
    <title>Login</title>
    <style>
        .login{
            width: 100%;
            height: 80vh;
            background-size: cover;
        }
        .login-content{
            background-color: #fff;
            width: 30%;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 3px 20px 2px rgba(0, 0, 0, 0.3);
            position: relative;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            text-align: center;
        }
        .login .login-title{
            font-size: 20px;
            margin: 20px 0;
        }
    </style>
     <script>
        //限制不框架内使用
        if (self !== top) { window.open("login.html", "_self"); }
      </script>
</head>
<body>
<div id="app">

    <div class="login" v-if="regBool">
        <div class="login-content">
          <p class="login-title">通用后台管理系统</p>
          <!-- 头像区 -->
          <div class="avatar_box">
            
          </div>
          <!-- 登录表单区 预留label宽度设为0-->
          <el-form
            ref="loginFormRef"
            :model="loginForm"
            :rules="loginFormRules"
            label-width="70px"
            class="login_form">
    
            <el-form-item label="用户名" prop="username">
              <el-input
                v-model="loginForm.username" ></el-input>
            </el-form-item>
    
            <el-form-item label="密码" prop="password">
              <el-input
                v-model="loginForm.password"
                type="password"></el-input>
            </el-form-item>
            <el-form-item label="验证码" prop="yzm">
                <el-row>
                    <el-col :span="12">              
                        <el-input v-model="loginForm.yzm" placeholder="请输入验证码" 
                        @keyup.enter.native="login" :style="{width: '100%'}"></el-input>
                    </el-col>
                    <el-col :span="6">
                        <img id="captcha_img" src="controller/captcha.php" >
                    </el-col>
                    <el-col :span="6">
                        <a href="javascript:void(0)" onclick="document.getElementById('captcha_img').src='controller/captcha.php?r='+Math.random() ">换一个?</a>
                    </el-col>
                  </el-row>
            </el-form-item>   

            <el-form-item class="btns">
              <el-button type="primary" @click="login">登录</el-button>
              <el-button type="info" @click="onShowReg">注册</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>

      <el-dialog :visible.sync="regDialogVisible" @close="onCloseReg" title="注册">
        <el-form ref="elFormref" :model="regFormData" :rules="rulesReg"  size="medium" label-width="100px">
            <el-form-item label="用户名" prop="name">
                <el-input v-model="regFormData.name" placeholder="请输入单行文本用户名" clearable :style="{width: '100%'}">
                </el-input>
            </el-form-item>
            <el-form-item label="电话" prop="phone">
                <el-input v-model="regFormData.phone" placeholder="请输入电话" onkeyup="value=value.replace(/[^\d]/g,'')"
                          clearable :style="{width: '100%'}">
                </el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input v-model="regFormData.password" placeholder="请输入密码" show-password clearable :style="{width: '100%'}">
                </el-input>
            </el-form-item>
            <el-form-item label="重复密码" prop="repassword">
                <el-input v-model="regFormData.repassword" placeholder="请输入重复密码" show-password
                          :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer">
            <el-button >取消</el-button>
            <el-button type="primary" @click="Register">确定</el-button>
        </div>
    </el-dialog>
</div>
</body>
<script src="js/axios.js"></script>
<script src="js/comm.js"></script>
<script src="js/vue.js"></script>
<script src="js/element.js"></script>
<script src="js/util.js"></script>

<script>

new Vue({       
    el: '#app',
    data() {
        return {
            loginForm: {
                username: 'admin',
                password: 'a123456',
                yzm:''
            },
            loginFormRules: {
                username: [
                    { required: true, message: '请输入登录名', trigger: 'blur' },
                    { min: 3, max: 10, message: '长度在3~10之间', trigger: 'blur' },
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 6, max: 15, message: '长度在6~15之间', trigger: 'blur' },
                ],
            },
            regBool:true,
            regDialogVisible:false,
            regFormData:{
                name:'1',
                phone:'1',
                password:'1',
                repassword:'1',
            },
            rulesReg: {
                name:       [{required: true,  message: '请输入用户名',trigger: 'blur'}],
                phone:      [{required: true,message: '请输入电话', trigger: 'blur'}],
                password:   [{required: true,message: '请输入密码', trigger: 'blur'}],
                repassword: [{required: true,
                    validator:(rule, value, callback) => {
                        if (value === '') {
                            callback(new Error('请再次输入密码'));
                        } else if (value !== this.regFormData.password) {
                            callback(new Error('两次输入密码不一致!'));
                        } else {
                            callback();
                        }
                    }
                }],
                yzm: [{required: true,message: '请输入验证码', trigger: 'blur'}],
            },
        }
    },
    methods: {
        resetLoginForm() {
            this.$refs.loginFormRef.resetFields()
        },
        login() {
        
            this.$refs.loginFormRef.validate(async (valid, obj) => {
                if (valid){

                    axios.post('controller/user.php?lx=login', this.loginForm).then((res) => {
                        
                        if(res.data.code=='200'){
                            console.log(res)
        
                            //this.$message.success('恭喜您，登录成功')

                            window.sessionStorage.setItem('token', res.data.token) 
                            window.sessionStorage.setItem('refreshToken', res.data.refreshToken) 
                            window.sessionStorage.setItem('userInfo', JSON.stringify(res.data.info))
                            //JSON.parse(sessionStorage.getItem('userInfo'))
                            
                            //this.$router.push('/')
                            window.location.href = "index.html"
                        }

                        this.$message({
                            message: res.data.message,
                            type: res.data.code=='200'?'success':'warning',
                        });
                    }); 

                } else{
                    
                    return false
                }  
            })
        },
        onShowReg(){
            this.regBool=false
            this.regDialogVisible=true
        },
        onCloseReg(){
            this.regBool=true
        },
        Register(){
            this.$refs.elFormref.validate((valid) => {
                if (valid) {
                    axios.post('controller/user.php?lx=register', { ...this.regFormData }).then((res) => {

                        this.$message({
                            message: res.data.message,
                            type: res.data.code=='200'?'success':'danger'
                        });

                        if(res.data.code=='200') {
                            this.regBool = true
                            this.regDialogVisible = false
                            this.$refs.elFormref.resetFields()
                        }
                    });
                }
            })
        }
    },
    mounted(){
       // this.$message.success('请先登录')
    },       

})
</script>
</html>